<template>
  <div class="app-container">
    <div class="header">
      <div class="word">
        <div class="w1">
          加工管理系统
        </div>
        <div class="w2">
          在加工管理中你可以查看商品加工的状态，加工编号等基本信息，同时还可以实现查询加工订单，添加加工订单等功能，提供一套可行的加工管理方案
        </div>
        <div class="w2">
          加工管理系统是加工系统中重要的一环,它可以为我们提供加工的信息，为进一步加工做准备
        </div>
      </div>
      <img class="imgDri"
           src="../../static/300.jpg">
    </div>
    <div class="index">
      <div class="searchHead">
        <el-button type="primary"
                   @click="openForm()">新增</el-button>
        <el-input v-model="searchInput"
                  placeholder="请输入订单编号"
                  class="searchIuput">
          <el-button slot="append"
                     icon="el-icon-search"
                     @click="searchHandle" />
        </el-input>
      </div>
      <el-table :data="dataList"
                type=""
                style="width: 100%">
        <el-table-column prop="id"
                         label="加工批次" />
        <el-table-column prop="plantId"
                         label="种植批次" />
        <el-table-column prop="processType"
                         label="加工类型" />
        <el-table-column prop="processSite"
                         label="加工地点" />
        <el-table-column prop="processMode"
                         label="加工方式" />
        <el-table-column prop="gmtModified"
                         label="加工时间" />
        <el-table-column prop="processStaff"
                         label="操作人员" />
        <el-table-column prop="staffPhone"
                         label="联系方式" />
        <el-table-column fixed="right"
                         label="操作"
                         width="200">
          <template slot-scope="scope">
            <el-button type="text"
                       style="color: #FF8300"
                       @click="openShippingForm(scope.row)">运输流向</el-button>
            <el-button type="text"
                       @click="openForm(scope.row)">修改</el-button>
            <el-button type="text"
                       style="color:red"
                       @click="deleteHandle(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination layout="prev, pager, next, jumper,total"
                       :total="total"
                       :current-page="pageNum"
                       style="margin-top:15px"
                       @size-change="pageSizeChange"
                       @current-change="pageChange" />
      </div>
    </div>
    <Form ref="form"
          @refresh="load" />
    <ShippingForm ref="shippingForm"
                  @refresh="load"></ShippingForm>
  </div>
</template>

<script>
import { getMachiningPage, deleteMachiningById, searchMachining } from '@/api/machining'
import ShippingForm from '../harvest/components/shippingForm.vue'
import Form from './components/form.vue'
export default {
  name: 'CarLogistics',
  components: {
    ShippingForm,
    Form
  },
  data () {
    return {
      saleId: '',
      dataList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      select: '',
      searchInput: '',
    }
  },
  async mounted () {
    this.load()
  },
  methods: {
    async load () {
      const data = await getMachiningPage({
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
      this.dataList = data.data.records
      this.total = data.data.total
    },

    pageChange (page) {
      this.pageNum = page
      this.load()
    },

    pageSizeChange (size) {
      this.pageSize = size
      this.load()
    },

    searchHandle () {
      searchMachining(this.searchInput).then((response) => {
        if (response.code == 20000) { this.dataList = response.data.records }
      })
    },

    deleteHandle (id) {
      this.$confirm(
        '确定要删除吗？',
        'Warning',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        if (id) {
          console.log(id)
          this.delete(deleteMachiningById, id)
        } else {
          let ids = ''
          this.seleteList.forEach(item => {
            ids += item.id + ','
          })
          this.delete(deleteMachiningById, ids)
        }
      })
        .catch(() => { })
    },

    delete (operation, param) {
      operation(param).then(() => {
        this.load()
        this.$message({
          type: 'success',
          message: '操作成功'
        })
      }).catch(() => {
        this.$message({
          type: 'danger',
          message: '操作失败'
        })
      })
    },
    openForm (machining) {
      this.$refs.form.init(machining)
    },
    openShippingForm (data) {
      this.$refs.shippingForm.init(data)
    },
  }
}
</script>

<style lang="scss" scoped>
.qrcode-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header {
  width: 100%;
  height: 350px;
  // border: 1px solid black;
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;
}

.sel {
  width: 310px;
  display: flex;
  // border: 1px solid black;
  justify-content: right;
  align-content: center;
}

.sel2 {
  width: 240px;
}

.page {
  width: 100%;
  display: flex;
  justify-content: right;
}

.imgDri {
  height: 300px;
  width: 400px;
}

.in {
  width: 100%;
}

.w1 {
  height: 80px;
  font-size: 25px;
  font-weight: 350;
}

.w2 {
  height: 50px;
  font-size: 15px;
  font-weight: 250;
}

.searchHead {
  display: flex;
  justify-content: space-between;
}

.searchIuput {
  width: 350px;
}

.sel3 {
  width: 100px;
}
</style>

